{include file="public/_meta"}
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
            <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <a class="layui-btn" href="add" lay-filter="sreach"><i class="layui-icon"></i>增加</a>
                        </div>
                    </form>
                    <hr>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                      <thead>
                        <tr>
                          <th width="70">ID</th>
                          <th>栏目名</th>
                          <th width="50">排序</th>
                          <th width="80">状态</th>
                          <th width="250">操作</th>
                      </thead>
                      <tbody class="x-cate">
                      {volist name="data" id="v"}
                        <tr cate-id='{$v.id}' fid='{$v.parent_id}' >
                          <td style="text-align: center;">{$v.id}</td>
                            {if condition="$v.level == 2"}
                            <td>
                                {:str_repeat('&nbsp;', $v.level*6)}&nbsp;
                                ├{$v.cat_name}
                            </td>
                            {else/}
                                <td>
                                    {:str_repeat('&nbsp;', $v.level*6)}
                                    <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                    {$v.cat_name}
                                </td>
                            {/if}


                          <td><input type="text" class="layui-input x-sort changeSort" data-id="{$v.id}" name="list_order" value="{$v.list_order}"></td>
                          <td data-id="{$v.id}">
                              <input type="checkbox" {if $v.status == 1}checked{/if} name="status" lay-skin="switch"
                              lay-filter="switchStatus"
                              lay-text="ON|OFF">
                          </td>
                          <td class="td-manage">
                            <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','edit?id={$v.id}')" ><i class="layui-icon">&#xe642;</i>编辑</button>
                            <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('添加子分类','add?id={$v.id}')" ><i class="layui-icon">&#xe642;</i>添加子栏目</button>
                            <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="member_del(this,{$v.id})" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                          </td>
                        </tr>
                      {/volist}

                      </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
  layui.use(['form'], function(){
    form = layui.form;

      form.on('switch(switchStatus)', function (obj) {

          let id = obj.othis.parent().attr('data-id');
          let status = obj.elem.checked ? 1 : 0;
          $.ajax({
              url: '{:url("category/status")}?id=' + id + '&status=' + status,
              success: (res) => {
                  if(res.status == 0) {
                      window.location.reload();
                  } else {
                      layer.msg("排序失败");
                  }
              }
          });
          return false;
      });

  });

   /*用户-删除*/
  function member_del(obj,id){
      layer.confirm('确认要删除吗？',function(index){
          //发异步删除数据
          $.ajax({
              url: '{:url("category/delete")}?id=' + id,
              success: (res) => {
                  if(res.status == 0) {
                      $(obj).parents("tr").remove();
                      layer.msg('已删除!',{icon:1,time:1000});
                  } else {
                      layer.msg("排序失败");
                  }
              }
          });

      });
  }

  // 分类展开收起的分类的逻辑
  //
  $(function(){
    $("tbody.x-cate tr[fid!='0']").hide();
    // 栏目多级显示效果
    $('.x-show').click(function () {
        if($(this).attr('status')=='true'){
            $(this).html('&#xe625;');
            $(this).attr('status','false');
            cateId = $(this).parents('tr').attr('cate-id');
            $("tbody tr[fid="+cateId+"]").show();
       }else{
            cateIds = [];
            $(this).html('&#xe623;');
            $(this).attr('status','true');
            cateId = $(this).parents('tr').attr('cate-id');
            getCateId(cateId);
            for (var i in cateIds) {
                $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
            }
       }
    })

      $('.changeSort').on('change',function () {
          let id = $(this).attr('data-id');
          let val = $(this).val();
          if(!val){
              return;
          }
          let url = '{:url("category/listorder")}?id=' + id + '&listorder='+val;
          $.get(url,function (res) {
              if(res.status == 0) {
                  window.location.reload();
              } else {
                  layer.msg("排序失败");
              }
          })

      })
  })

  var cateIds = [];
  function getCateId(cateId) {
      $("tbody tr[fid="+cateId+"]").each(function(index, el) {
          id = $(el).attr('cate-id');
          cateIds.push(id);
          getCateId(id);
      });
  }



</script>
</body>
</html>
